<template>
  <h2>customRef</h2>
  <input type="text" v-model="keyword">
  <p>{{keyword}}</p>
</template>

<script lang='ts'>
import { defineComponent,ref, customRef } from "vue";
//自定义hook防抖函数
//value传入的数据，将来数据的类型不确定，所以用泛型
//delay防抖的间隔时间，默认200毫秒
function useDebounceRef<T>(value:T,delay=2000) {
  //准备一个存储定时器的id的变量
  let timeOutId:number;
  return customRef((track,trigger) => {
    return {
      //返回数据
      get() {
        //告诉vue追踪数据
        track();
        return value;
      },
      //设置数据
      set(newValue:T) {
        //清理定时器
        clearTimeout(timeOutId);
        //开启定时器
        timeOutId = setTimeout(() => {
          value = newValue;
          //告诉vue更新界面
          trigger();
        },delay)
      }
    }
  })
}
export default defineComponent({
  name: "App",
  //需求：input输入一段时间后再修改p中的keyword值（防抖）
  setup() {
    //const keyword = ref('abc');//不防抖
    const keyword = useDebounceRef('abc',3000);
    return {
      keyword
    };
  },
});
</script>
